<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <!-- <script src="./test.js"></script> -->
</head>
<body>
        <div id="test">
            test
        </div>
        <script>
        
        /* var tmp = new Date();

function f(){
    console.log(tmp)
    if(false){
        var tmp = "this is not true"
    }
}

f(); */


//这是在 es5中运行结果，I am inside!，在es6中会报错
// function f() { console.log('I am outside!'); }

// (function () {
//   function f() { console.log('I am inside!'); }
//   if (false) {
//   }
//   f();
// }());

// const tmp ;  //此处会报错，必须初始化

// console.log(tmp)

// let template = `
// <ul>
//   <% for(let i=0; i < data.supplies.length; i++) { %>
//     <li><%= data.supplies[i] %></li>
//   <% } %>
// </ul>
// `;

function compile(template){
  const evalExpr = /<%=(.+?)%>/g;
  const expr = /<%([\s\S]+?)%>/g;

  template = template
    .replace(evalExpr, '`); \n  echo( $1 ); \n  echo(`')
    .replace(expr, '`); \n $1 \n  echo(`');

  template = 'echo(`' + template + '`);';

  let script =
  `(function parse(data){
    let output = "";

    function echo(html){
      output += html;
    }

    ${ template }

    return output;
  })`;

  return script;
}

let parse = eval(compile(template));
document.getElementById("test").innerHTML = parse({ supplies: [ "broom", "mop", "cleaner" ] });
        </script>
</body>
</html>